<!doctype html>
<html lang="en" class="feedback">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>问题反馈</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/feedback.css" />
	</head>

	<body id="app">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<button @tap="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">添加</button>
			<h1 class="mui-title">添加圈子</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="mui-inline">圈子名称</div>
			</div>
			<div class="row mui-input-row">
				<input type="text" name="title" id="title" value="" placeholder="这里输入圈子名称..."/>
			</div>
			<div class="mui-content-padded">
				<div class="mui-inline">圈子分类</div>
			</div>
			<div class="row mui-input-row" @tap="popCircleType">
				<input type="text" name="circleType" id="circleType" :value="selectedCircleType.text" readonly="readonly" placeholder="这里选择圈子分类"/>
			</div>
			<div class="mui-content-padded">
				<div class="mui-inline">圈子说明</div>
			</div>
			<div class="row mui-input-row">
				<textarea id='content' class="mui-input-clear question" placeholder="请详细描述你要添加的圈子..."></textarea>
			</div>
			<div class="mui-content-padded">
				<div class="mui-inline">标签</div>
			</div>
			<div class="row mui-input-row">
				<input type="text" name="title" id="tag1" value="" placeholder="这里输入标签1, 没有请留空..."/>
			</div>
			<div class="row mui-input-row">
				<input type="text" name="title" id="tag2" value="" placeholder="这里输入标签2, 没有请留空..."/>
			</div>
			<div class="row mui-input-row">
				<input type="text" name="title" id="tag3" value="" placeholder="这里输入标签3, 没有请留空..."/>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/feedback.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			mui.init();
			mui('.mui-scroll-wrapper').scroll();
			var title = document.getElementById("title");
			var content = document.getElementById("content");
			
			var vm = new Vue({
				el:'#app',
				data:{
					circleTypeList:[{"id":"1","name":"哲学"},{"id":"2","name":"经济学"},{"id":"3","name":"法学"},{"id":"4","name":"教育学"},{"id":"5","name":"心理学"},{"id":"6","name":"文学"},{"id":"7","name":"历史学"},{"id":"8","name":"理学"},{"id":"9","name":"工学"},{"id":"10","name":"农学"},{"id":"11","name":"医学"},{"id":"12","name":"管理学"},{"id":"13","name":"艺术学"},{"id":"14","name":"其他"}],
					selectedCircleType:{},
					picker:{},
				},
				ready:function(){
					this.picker = new mui.PopPicker();
					this.picker.setData(this.circleTypeList.map(function (item) {
						return {value:item.id,text: item.name};
					}));
					mui.plusReady(function () {
						var current = plus.webview.currentWebview();
						showPage(current);
					})
				},
				methods:{
					popCircleType:function () {
						var me = this;
						this.picker.show(function(SelectedItem) {
							me.selectedCircleType=SelectedItem[0];
						});
					},
					submit:function () {
						var me = this;
						if(tool.isEmptyVal(title.value)){
							mui.toast('请输入圈子名称');
							return;
						}
						if(!me.selectedCircleType.value){
							mui.toast('请选择圈子分类');
							return;
						}
						if(tool.isEmptyVal(content.value)){
							mui.toast('请输入圈子内容');
							return;
						}
						var tag1 = document.getElementById("tag1").value;
						var tag2 = document.getElementById("tag2").value;
						var tag3 = document.getElementById("tag3").value;
						ajax.post(api.circle.addCircle,{Title: title.value, Type:me.selectedCircleType.value, Content:content.value,Tag1:tag1, Tag2:tag2, Tag3:tag3},function () {
							var wvCircle = plus.webview.getWebviewById('my_circle.html');
							var current = plus.webview.currentWebview();
							mui.fire(wvCircle,'reloadCircles');
							current.close();
						},true)
					}
				},
			});
			
		</script>
	</body>

</html>